import { motion, useInView } from 'framer-motion';
import { useRef } from 'react';

const Education = () => {
  const ref = useRef(null);
  const isInView = useInView(ref, { once: true, margin: '-100px' });
  
  // Education data
  const education = [
    {
      school: '上海交通大学',
      degree: '计算机科学与技术',
      level: '本科',
      period: '2018.09 - 2022.06'
    }
  ];
  
  return (
    <motion.section
      id="education"
      ref={ref}
      initial={{ opacity: 0, x: 50 }}
      animate={isInView ? { opacity: 1, x: 0 } : {}}
      transition={{ duration: 0.8, ease: "easeOut" }}
      className="bg-color-card rounded-xl p-6 shadow-lg backdrop-blur-sm border border-gray-800"
    >
      <div className="flex items-center mb-6">
        <div className="w-10 h-10 rounded-full bg-color-accent flex items-center justify-center mr-4 star-glow">
          <i className="fa-solid fa-graduation-cap text-white"></i>
        </div>
        <h2 className="text-2xl font-bold text-gray-100">教育背景</h2>
      </div>
      
      <div className="border-t border-gray-700 pt-6">
        {education.map((edu, index) => (
          <motion.div
            key={index}
            initial={{ opacity: 0, y: 20 }}
            animate={isInView ? { opacity: 1, y: 0 } : {}}
            transition={{ duration: 0.6, delay: index * 0.2 }}
            className="pb-6 last:pb-0"
          >
            <div className="flex flex-col md:flex-row md:items-center md:justify-between mb-2">
              <h3 className="text-xl font-semibold text-gray-100">{edu.school}</h3>
              <span className="text-gray-400 mt-1 md:mt-0">{edu.period}</span>
            </div>
            <p className="text-gray-300">{edu.degree} ({edu.level})</p>
          </motion.div>
        ))}
      </div>
    </motion.section>
  );
};

export default Education;